<template>
    <v-container fluid>
        <v-container fluid>
            <h4 class="mb-3">充值管理</h4>

            <v-row align="center">
                <v-col :md="2" :sm="6">
                    <AutocompleteOrg v-model="queryOrg" item-key="org_code"></AutocompleteOrg>
                </v-col>
                <v-col :md="2" :sm="6">
                    <AutocompleteUser label="姓名" v-model="queryName" item-text="name"></AutocompleteUser>
                </v-col>

                <v-col :md="2" :sm="6">
                    <v-select :items="statusItem"  clearable v-model="queryStatus" label="状态"> </v-select>
                </v-col>

                <v-col :md="2" :sm="6">
                     <v-text-field
                        label="订单号"
                        v-model="queryOrderno"
                        clearable
                        type="text">
                    </v-text-field>
                </v-col>

                <v-col :md="4" :sm="6">
                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="query()"
                    >查询
                    </v-btn>

                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="reset()"
                    >重置
                    </v-btn>

                </v-col>
            </v-row>
        </v-container>

        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            no-data-text="没有数据..."
            :page.sync="pageNo"
            :items-per-page="pageSize"
            hide-default-footer
            class="elevation-1 overflow-x-auto"
            style="white-space: nowrap"
            calculate-widths
        >
            <template v-slot:[`item.status_name`]="{ item }">
               <span  class="red--text" v-if="item.status == 2 || item.status == 3">
                    {{item.status_name}}
               </span>
               <span v-else>
                    {{item.status_name}}
               </span>
            </template>
        </v-data-table>

        <v-row v-if="items.length > 0 && totalPage >= 1" class="mt-2">
            <v-col cols="12">
                <v-pagination
                    v-model="pageNo"
                    :length="totalPage"
                    :total-visible="7"
                    @input="onPageChange"
                ></v-pagination>
            </v-col>
        </v-row>

    </v-container>
</template>

<script>
    import axios from "axios";
    import AutocompleteOrg from "../../widgets/AutocompleteOrg.vue";
    import AutocompleteUser from "../../widgets/AutocompleteUser.vue";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            headers: [
                { text: '序号', value: 'id' },
                { text: '订单号', value: 'orderno' },
                { text: '组织名称', value: 'org.name' },
                { text: '姓名', value: 'user.name' },
                { text: '手机号', value: 'user.mobile' },
                { text: '金额', value: 'price' },
                { text: '次数', value: 'ticket' },
                { text: '状态', value: 'status_name' },
                { text: '支付渠道', value: 'channel_name' },
                { text: '订单时间', value: 'created_at' },
            ],
            items: [],
            pageNo: 1,
            pageSize: 20,
            totalPage: 0,
            statusItem: [
                { value: '00', text: '支付中' },
                { value: 1, text: '已支付' },
                { value: 2, text: '过期未支付' },
                { value: 3, text: '支付失败' },
            ],
            queryStatus: null,
            queryName: null,
            queryOrderno: null,
            queryOrg: null,
        }),


        components: {
            AutocompleteOrg: AutocompleteOrg,
            AutocompleteUser: AutocompleteUser,
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager',
                'user'
            ]),
        },

        created() {
            this.loadList();
        },

        methods: {
            loadList() {
                this.loading = true;
                const that = this;

                const params = Object.entries({
                    pageSize: this.pageSize,
                    page: this.pageNo,
                    user_id: this.queryName ? this.queryName.id : '',
                    org_code: this.queryOrg ? this.queryOrg.org_code : '',
                    orderno: this.queryOrderno ? this.queryOrderno : '',
                    status: this.queryStatus ? this.queryStatus : ''
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});

                axios.get(`/user/deposit`, {
                    params: params
                }).then((response) => {
                    if(response.data.data.length >= 0) {
                        this.items = response.data.data;
                        this.totalPage = response.data.last_page;
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
            },

            onPageChange() {
                this.loadList();
            },

            query() {
                this.pageNo = 1;
                this.loadList();
            },

            reset() {
                this.queryName = null;
                this.queryMobile = null;
                this.queryOrg = null;
                this.queryKyc = null;
                this.pageNo = 1;
                this.loadList();
            },
        }
    }
</script>
